@extends("layout")
@section("title", "标签系统")
@section('style')
    <style>
        .layui-table-cell{
            height:auto;
            line-height:1.5rem;
        }
    </style>
@endsection
@section("body")
    <div style="width:90%" class="layui-fluid">
    {{--<div class="layui-container">--}}
        @include('nav', ['title' => '标签系统'])
        <div id="input_select" style="margin-top: 1rem">
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">标签分类:</label>
                    <div class="layui-input-inline">
                        <select name="category" lay-filter="lay_category" id="lay_category">
                            <option value="">全部</option>
                            @foreach($data['category'] as $id => $val)
                                <option value="{{$id}}">{{$val}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="layui-input-inline">
                        <select name="category_child" lay-filter="lay_category_child" id="lay_category_child">
                            <option value="">全部</option>
                            @foreach($data['category_child'] as $id => $val)
                                <option value="{{$id}}">{{$val}}</option>
                            @endforeach
                        </select>
                    </div>

                    <div style="margin-left:50%">
                        <div class="layui-input-inline" style="">
                            <input type="text" class="layui-input" name="content" style="font-size: 12px;"
                                   placeholder="请输入标签名称" />
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn" id="search" lay-submit lay-filter="search">
                                <i class="layui-icon layui-icon-search"></i>
                            </button>
                        </div>
                    </div>

                    @if($auth)
                        <div class="layui-input-inline" style="float:right">
                            <button class="layui-btn layui-btn-normal" id="btn-add-tag">
                                添加标签
                            </button>
                        </div>
                    @endif
                </div>

                <div class="layui-row">
                    <table id="tableId" lay-filter="filterTable"></table>
                </div>
            </div>
        </div>
        <script type="text/html" id="barDemo">
            {{--<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>--}}
            @if($auth)
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            @endif
        </script>
@endsection
@section("script")
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'jquery', 'laydate', 'laytpl', 'table'], function () {
            var layer = layui.layer
                , form = layui.form
                , $ = layui.jquery
                , table = layui.table;

            $("button[type='reset']").click(function () {
                window.location.reload();
            });
            
            $('#btn-add-tag').click(function () {
                AddEditTag(0)
            });
            function reloadClose() {
                layer.msg(111);
            }
            function AddEditTag(id) {
                layer.open({
                    type: 2,
                    title: '添加标签',
                    shadeClose: true,
                    shade: 0.8,
                   // btn: ['按钮1', '按钮2'], //只是为了演示
                    area: ['50%', '90%'],
                    content: '{{route('add_tag')}}?id=' + id, //iframe的url
                    end : function() { //关闭回调.
                       // table.reload('tableId');
                    }
                });
            }
            loadTable();

            function loadTable(pp) {
                var url = '{{route('tag')}}';
                if (typeof(pp) !== "undefined") {
                    url += "?" + pp;
                }
                console.log(url);
                //第一个实例
                table.render({
                    elem: '#tableId'
                    ,height: 800
                    ,cellMinWidth:100
                    ,url: url//数据接口
                    ,method: 'post'
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'tag_id', title: '标签ID', sort: true, width:'10%'}
                        ,{field: 'tag_defined', title: '标签定义', width:'20%'}
                        ,{field: 'tag_base', title: '标签基础信息', width:'30%'}
                        ,{field: 'tag_save', title: '标签存储信息', width:'20%'}
                        ,{field: 'created_at', title: '时间信息', width: '10%', sort: true}
                        ,{width:'10%', align:'center', title:'操作', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
                    ]]
                });
            }
            // form.on('select(lay_category)', function (data) {
            //     layer.msg(JSON.stringify(data));
            // });
            form.on('select(lay_category_child)', function (data) {
                var str = "category="+$("#lay_category").val();
                str += "&category_child="+data.value;
                loadTable(str)
            });

            form.on('select(lay_category)', function (data) {
                $.getJSON('{{route('change_category')}}', {id: data.value}, function (rev) {
                    if(rev.status === 0) {
                        console.log(rev.data);
                        $('#lay_category_child').html('');
                        $("#lay_category_child").append($("<option>").val('').text('选择'));
                        $.each(rev.data, function (key, val) {
                            var op = $("<option>").val(key).text(val);
                            $("#lay_category_child").append(op);
                        });
                        form.render('select');
                    }
                })
                var str = "category="+data.value;
                str += "&category_child="+$("#lay_category_child").val();
                loadTable(str)
            });

            form.on('submit(search)', function (data) {
                console.log(data.field);
                // var str = "category="+data.field.category;
                // str += "&category_child="+data.field.category_child;
                // str += "&content="+data.field.content;
                var str = "content="+data.field.content;
                loadTable(str)
            });
            $(document).keyup(function(event){
                if(event.keyCode ==13){
                    $("#search").trigger("click");
                    $("#search").focus();
                }
            });

            //监听工具条
            table.on('tool(filterTable)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的DOM对象
                console.log(data);
                if(layEvent === 'detail'){ //查看
                    //do somehing
                } else if(layEvent === 'del'){ //删除
                    layer.confirm('确定删除该标签?', function(index){
                        //向服务端发送删除指令
                        $.post('{{route('destroy')}}', {id:data.id}, function (rev) {
                            if(rev.status === 0) {
                                layer.msg(rev.msg);
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            } else {
                                layer.msg(rev.msg);
                            }
                        }, 'json');
                    });
                } else if(layEvent === 'edit') { //编辑
                    console.log('edit:' + data.id);
                    AddEditTag(data.id)
                }
            });
        });
    </script>
    @include('plus.auth')
@endsection